<template>
	<view class="content ">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
					</view>
					
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../../static/img/lawyerVersion/anyuan-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="ay-ti u-m-t-12">
					案源广场
				</view>
				<view class="flex flex_cen u-m-t-20">
					<view class="flex">
						<image class="c1-1" src="../../../../static/img/home/c1-1.png" mode=""></image>
						<view class="ay-jj">
							精选真实案件
						</view>
					</view>
					<view class="flex u-m-l-40">
						<image class="c1-1" src="../../../../static/img/home/c1-1.png" mode=""></image>
						<view class="ay-jj">
							隐私保护
						</view>
					</view>
				</view>
				<view class="ay-gsa u-m-t-28" v-if="gnlist.length>0">
					恭喜{{gnlist[0].l_user.name}}{{gnlist[0].l_user.type==1?'律师':'法学生'}}在北京成案{{gnlist[0].price}}元
				</view>
			</view>
		</view>
		<view class="">
			<u-tabs height="88" :list="list" :is-scroll="false" :current="current" @change="change" active-color="#000"
				inactive-color="#666666"></u-tabs>
			<view class="ss-div flex flex_sb">
				<view class="flex">
					<view class="ss-div-item" @click="wcshow=true">
						{{type?type:'案件类型'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
					<view class="ss-div-item u-m-l-48" @click="showsr1=true">
						{{address?address:'全国'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
				</view>

				<view class="ss-div-item flex" @click="poshow=true">
					<image class="xs-img" src="../../../static/img/lawyerVersion/xs.png" mode=""></image>
					<view class="">
						筛选
					</view>
				</view>
			</view>
			<view class="u-padding-32">

				<view class="flex flex_sb">
					<view class="flex">
						<view class="jinri-text">今日</view>
						<view class="font_12_999 u-m-l-14">
							有 <span class="colred">{{online_num}}</span> 位律师正在参与抢案
						</view>
					</view>
					<view class="flex" @click="bensheng">
						<view class="chbox  flex_cen flex" v-if="chboxSel">
							<u-icon name="checkbox-mark" color="#fff" size="20"></u-icon>
						</view>
						<view class="chbox-no" v-if="!chboxSel"></view>
						<view class="font_12_666 u-m-l-8">
							只看本省
						</view>
					</view>
				</view>
			</view>
			<view class="anli-div">
				<view class=" anyuan u-m-b-20" v-for="(item,index) in dataList" :key="index" @click="todetail(item)">
					<view class="flex flex_sb">
						<view class="font_weight">
							<span v-if="item.serve">{{item.serve.name}}</span>
						</view>
						<view class="font_12_999">
							已跟进律师（{{item.has_follow_num}}/3）
						</view>
					</view>
					<view class="line_2 u-m-t-24">
						{{item.content}}
					</view>
					<view class=" flex flex_wrap u-p-b-24">
						<view class="bq-item u-m-t-20 u-m-r-20">
							<!-- {{item.price}} -->
							<span v-if="!item.price_dur_min && !item.price_dur_max">面议</span>
							<span v-if="item.price_dur_min && !item.price_dur_max">{{item.price_dur_min}}以上</span>
							<span v-if="!item.price_dur_min && item.price_dur_max">{{item.price_dur_max}}以下</span>
							<span v-if="item.price_dur_min && item.price_dur_max">{{item.price_dur_min}}~{{item.price_dur_max}}</span>
						</view>
					</view>
					<view class="flex flex_sb u-p-t-24 ay-bo">
						<view class="font_12_666 flex">
							<view class="" v-if="item.time_trans">{{item.time_trans}}</view>
							<view class="dizhi" v-if="item.province_name">{{item.province_name}}</view>
						</view>
						<view class="flex">
							<view class="btn1">
								独享
							</view>
							<view class="btn2">
								抢单
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>



		<u-popup v-model="poshow" mode="right" :closeable="true">
			<view class="from-text">
				<view class="form-title">
					排序筛选
				</view>
				<view class="sx-div flex flex_wrap">
					<view class="sx-item" :class="sxIndex1==1?'sx-item-sel':''" @click="sxIndex1=1">
						默认发布时间
					</view>
					<view class="sx-item" :class="sxIndex1==2?'sx-item-sel':''" @click="sxIndex1=2">
						标的额从高到低
					</view>
					<view class="sx-item" :class="sxIndex1==3?'sx-item-sel':''" @click="sxIndex1=3">
						标的额从低到高
					</view>
				</view>
				<view class="form-title u-m-t-40">
					涉案金额
				</view>
				<view class="sx-div flex flex_wrap">
					<view class="sx-item" :class="sxIndex2==-1?'sx-item-sel':''" @click="sheanje('-1','-1')">
						全部
					</view>
					<view class="sx-item" v-for="(item,index) in jineList" :key="index"
					 :class="sxIndex2==index?'sx-item-sel':''" @click="sheanje(item,index)">
						{{item.name}}
					</view>
					
				</view>
				<view class="qd-btn" @click="paixu">
					确定
				</view>
			</view>
		</u-popup>
		
		
		<!-- <u-picker :params="params"  mode="region" confirm-color="#651321" v-model="showsr1" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="wcshow" range-key="name"
			@confirm="showconfirm"></u-picker>
	</view>
</template>

<script>
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		data() {
			return {
				addressList:[],
				params: {
					province: true,
					city: true,
					area: true
				},
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#E59020'],
					slideBackgroundColor: [1, '#E59020']
				},

				list: [{
					name: '全部'
				}, {
					name: '精选案源'
				}, 
				// {
				// 	name: '图文咨询案源'
				// }, {
				// 	name: '电话咨询案源',
				// },
				],
				current: 0,
				gnlist:[],
				jineList:[],

				chboxSel: false,
				poshow: false,

				sxIndex1: -1,
				sxIndex2: -1,
				
				online_num:'',
				
				showsr1:false,
				address:'',
				type:'',
				wcshow:false,
				selector: [],
				dataList:[],
				
				cate_id:0,//服务类型 0全部 3图文 2电话
				task_id:'',//案件类型id
				province:'',//area.id
				price_dur_min:'',//涉案金额最小值
				price_dur_max:'',//涉案金额最大值
				this_province:0,//是否本省 1是0否
				orderby:'created_at desc' ,//排序 created_at desc,price asc\desc
				
				
				total:0,
				pageNum:1,
				pageSize:10,
			}
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.getList()
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad(e) {
			this.current = e.type
			if(this.current==0){
				this.cate_id=0
			}else if(this.current==1){
				this.cate_id=1
			}
			
			this.fuwuList()
			this.getList()
			this.gegnlist()
			this.getjineList()
			this.getaddrerss()
		},
		onShow(){
			this.pageNum = 1
			this.getList()
		},
		methods: {
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
						
						this.addressList.unshift({
							name:'全国',
							id:''
						})
					}
				})
			},
			sheanje(item,index){
				this.sxIndex2=index
				if(item=='-1'){
					this.price_dur_min = ''
					this.price_dur_max = ''
				}else{
					this.price_dur_min = item.min
					this.price_dur_max = item.max
				}
			},
			gegnlist(){
				this.$api({
					url: '/lawyer/success_order',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						limit:10 
					},
				}).then(res => {
					if (res.code == 1) {
						this.gnlist = res.data.data
					} 
				})
			},
			getjineList(){
				this.$api({
					url: '/case_price_range',
					method: 'get',
					
				}).then(res => {
					this.jineList = res
				})
			},
			getList(){
				this.$api({
					url: '/lawyer/case_square',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						page:this.pageNum,
						limit:this.pageSize,
						is_pay:this.cate_id,
						task_id:this.task_id,
						province:this.province,
						price_dur_min:this.price_dur_min,
						price_dur_max:this.price_dur_max,
						this_province:this.this_province,
						orderby:this.orderby
					},
				}).then(res => {
					if (res.code == 1) {
						this.poshow = false
						// this.dataList = res.data.list.data
						this.online_num = res.data.online_num
						
						
						
						this.total=res.data.list.total
						let data = res.data.list.data
						if (this.pageNum == 1) {
							this.dataList = data
						} else {
							this.dataList = [...this.dataList, ...data]
						}
					} 
				})
			},
			fuwuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
						
						this.selector.unshift({
							name:'全部',
							id:''
						})
					}
				})
			},
			showconfirm(e) {
				this.pageNum = 1
				this.type = this.selector[e].name
				this.task_id = this.selector[e].id
				this.getList()
				// console.log(e)
			},
			regionconfirm1(e) {
				this.pageNum = 1
				// this.address = e.area.label
				// this.province = e.area.value
				this.address = e[0].label
				this.province = e[0].value
				this.getList()
				console.log(e)
			},
			bensheng(){
				this.pageNum = 1
				this.chboxSel=!this.chboxSel
				if(this.chboxSel){
					this.this_province = 1
				}else{
					this.this_province = 0
				}
				this.getList()
			},
			paixu(){
				this.pageNum = 1
				if(this.sxIndex1==1){
					this.orderby = 'created_at desc'
				}else if(this.sxIndex1==2){
					this.orderby = 'price desc'
				}else if(this.sxIndex1==3){
					this.orderby = 'price asc'
				}
				
				this.getList()
			},
			change(index) {
				this.pageNum = 1
				// this.dataList = []
				this.current = index;
				if(this.current==0){
					this.cate_id=0
				}else if(this.current==1){
					this.cate_id=1
				}
				
				this.getList()
			},
			back() {
				uni.navigateBack()
			},
			todetail(e) {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/index/anyuanDetail?id="+e.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.from-text {
		/* position: relative; */
		width: 570rpx;
		padding: 0 30rpx;
		padding-top: 220rpx;
		position: relative;
		height: 100%;

		.form-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin-bottom: 24rpx;
		}

		.sx-div {

			.sx-item {
				background: #F5F5F7;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				padding: 12rpx 22rpx;
				font-size: 24rpx;
				color: #373737;
				margin-right: 22rpx;
				margin-bottom: 24rpx;

				&-sel {
					background: #FFEBEB;
					color: #F92626;
				}
			}
		}

		.qd-btn {
			width: 506rpx;
			height: 92rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 92rpx;
			position: absolute;
			bottom: 40rpx;

		}
	}


	.anli-div {
		width: 686rpx;
		border: 1rpx solid #F8ECEC;
		margin: 0rpx auto;
		// margin-top: 28rpx;
	}

	.anyuan {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.bq-item {
			background: #F7F7F7;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 2rpx solid #D1D1D1;
			padding: 4rpx 14rpx;
		}

		.ay-bo {
			border-top: 1px #eee solid;

			.dizhi {
				border-left: 1px #eee solid;
				margin-left: 12rpx;
				padding-left: 12rpx;
			}

			.btn1 {
				width: 120rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
				line-height: 56rpx;
			}

			.btn2 {
				width: 120rpx;
				height: 56rpx;
				background: #FFEBEB;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #FF9D9D;
				font-size: 24rpx;
				color: #F81B19;
				font-weight: bold;
				text-align: center;
				line-height: 56rpx;
				margin-left: 12rpx;
			}
		}

	}

	.jinri-text {
		background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 2rpx 4rpx;
	}

	.chbox {
		width: 34rpx;
		height: 34rpx;
		background: #F81B1B;
		border-radius: 50%;
		text-align: center;
		// line-height: 24rpx;
	}

	.chbox-no {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		border: 1px #999 solid;
	}

	.ss-div {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		padding: 0 32rpx;

		.ss-div-item {
			font-size: 28rpx;
			color: #333333;

			.xs-img {
				width: 24rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}
		}
	}

	.nav_wrap {
		width: 100vw;
		position: relative;
		height: 88rpx;

		.back_wrap {
			position: absolute;
			left: 24rpx;
			z-index: 8;
		}
		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	/deep/.u-tab-bar {
		background-color: #FC3A30 !important;
	}

	.main-div {
		position: relative;
		width: 100%;
		min-height: 400rpx;

		.main-bg {
			width: 100%;
			height: 400rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.m-d {
			width: 100%;
			// height: 400rpx;
			position: relative;
			padding-top: 88rpx;
			z-index: 2;
			text-align: center;

			.c1-1 {
				width: 24rpx;
				height: 24rpx;
			}

			.ay-ti {
				font-weight: bold;
				font-size: 44rpx;
				color: #FFFFFF;
			}

			.ay-jj {
				font-weight: bold;
				font-size: 20rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
			}

			.ay-gsa {
				font-size: 24rpx;
				color: #FFFFFF;
				width: 392rpx;
				height: 48rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				margin: 0 auto;
				line-height: 48rpx;
			}
		}
	}
</style>